<script setup lang="ts">
const props = defineProps<{
  examItem: ExamHeadType;
  index: number;
}>();
const emit = defineEmits<{
  joinExam: [];
}>();
const open = ref(false);
function joinExam() {
  emit("joinExam");
  navigateTo(`/exam/${props.index}`);
}
function reJoinExam() {
  navigateTo(`/exam/${props.index}`);
}
</script>

<template>
  <UCard
    class="shadow-md p-2 rounded-md mb-2 dark:bg-slate-300"
    :ui="{
      // background: 'bg-white dark:bg-sky-200',
    }"
  >
    <div class="flex justify-between">
      <div class="text-3xl">
        {{ examItem.title }}
      </div>
      <small class="text-rose-500">时长：{{ examItem.expire }}分钟</small>
    </div>
    <div class="text-sm m-2">
      {{ examItem.content }}
    </div>
    <div class="flex justify-between">
      <div>
        <div class="text-gray-500 text-lg">
          题目总数:<strong>{{ examItem.question_count }}</strong> &nbsp;
          总分:<strong>{{ examItem.total_score }}</strong> &nbsp; 
        </div>
        <div class="text-gray-500 text-lg">
          及格分:<strong>{{ examItem.pass_score }}</strong> &nbsp;
          上次得分:<strong>{{ "TODO" }}</strong>
        </div>
      </div>
      <div v-if="examItem.has_test" class="space-x-2">
        <UButton disabled>
          考过了
        </UButton>
        <UButton @click="reJoinExam">
          再测一次
        </UButton>
      </div>
      <UButton v-else @click="joinExam">
        立即考试
      </UButton>
    </div>
  </UCard>
  <Teleport to="body">
    <ClientOnly>
      <UContainer
        v-if="open"
        class="h-screen right-0 fixed z-40 flex items-center justify-center left-0 bg-black bg-opacity-30 m-0 transition-opacity ease-in-out duration-300"
        :ui="{
          // padding: '',
          constrained: '',
        }"
      >
        <UCard
          class="w-[240px] h-[180px] p-3"
          :ui="{
            body: {
              base: tw`flex flex-col justify-between`,
            },
            footer: {
              base: tw`flex justify-evenly`,
            },
          }"
        >
          <p>是否参加考试?</p>
          <template #footer>
            <UButton
              type="primary"
              @click="
                () => {
                  open = false;
                  navigateTo(`/exam/${index}`);
                }
              "
            >
              是的
            </UButton>
            <UButton
              type="primary"
              @click="
                () => {
                  open = false;
                }
              "
            >
              关闭
            </UButton>
          </template>
        </UCard>
      </UContainer>
    </ClientOnly>
  </Teleport>
</template>
